<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<div class="modal fade" id="xyModal">
  <div class="modal-dialog" style="left: 0px; width: 100%">
    <div id="mapModalContent" class="modal-content" style="margin-left: auto; margin-right: auto;">
      <div id="mapModalHeader" class="modal-header">
        <h4 class="modal-title">坐标选择</h4>
      </div>
      <div id="mapBody" class="modal-body">
      </div>
      <div class="modal-footer">
        <button id="cmap" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button id="dmap" type="button" class="btn btn-primary">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">

	var dxy = '', jcropApi;

	var map = new Image();
	//map.src = root + '/file/getMap1';
	map.src = root + '/resources/map/map.jpg';
	map.onload = function() {
		$('#mapModalContent').css({
			width : this.width + 42 + 'px'
		//height: this.height + 140 + 'px',
		});
		$('#mapBody').append(this);
		var all = eval('(' + $('#all').val() + ')');
		for ( var i in all) {
			var img = new Image();
			img.src = root + '/resources/images/st/' + all[i].normalImage;
			$(img).css({
				position : 'absolute',
				'left' : all[i].px,
				'top' : all[i].py
			});
			$('#mapBody').append($(img));
		}
		jcropApi = $.Jcrop(this, {
			onChange : showCoords,
			onSelect : showCoords,
			bgColor : 'black',
			bgOpacity : .8,
			//- setSelect: [ 100, 100, 50, 50 ],
			minSize : [ 20, 20 ],
			maxSize : [ 20, 20 ],
			//- aspectRatio: 16 / 9
			allowSelect : true,
			allowMove : false,
			allowMove : true
		});
	};

	function showCoords(c) {
		$('#pxy').val(c.x + "," + c.y);
	}

	$('#pxy').click(function() {
		$('#xyModal').modal({
			show : true,
			backdrop : 'static'
		});
		dxy = $('#pxy').val();
		if (dxy != '' && jcropApi) {
			var xy = dxy.split(',');
			jcropApi.setSelect([ xy[0], xy[1], xy[0] + 20, xy[1] + 20 ]);
		}
	});

	$('#cmap').click(function() {
		$('#pxy').val(dxy);
		$('#xyModal').modal('hide');
	});

	$('#dmap').click(function() {
		$('#xyModal').modal('hide');
	});
</script>
